<template>
  <div class="total-sales">
    <!-- 电商数据看板-销售总额7天变化趋势开始 -->
    <div class="echarts-line">
    <div class="card-total ">
      <div class="card-total-left"><span>￥</span><label>{{ baseData.total }}</label></div>
      <div class="card-total-right"><label>合计</label><span>￥</span><label>{{ baseData.subTotal }}</label></div>
    </div>
    <div class="card-ratio">
      <div class="card-ratio-left">
<!--        <p class="data-green">-->
<!--        <p class="data-red">-->
        <p v-bind:class="[{'data-green' : baseData.increaseNum >= 0}, {'data-red' : baseData.increaseNum < 0}]">
          <span v-bind:class="['arrow', {'north-east' : baseData.increaseNum >= 0}, {'south-east' : baseData.increaseNum < 0}]">
            <b v-bind:class="[{'el-icon-top-right' : baseData.increaseNum >= 0}, {'el-icon-bottom-right' : baseData.increaseNum < 0}]"></b>
          </span>
          <label>环比增长</label>{{ baseData.increaseNum > 0 ? '+' : ''}}{{ baseData.increase }}%
        </p>
      </div>
      <div class="card-ratio-right"><label>均值</label><span>￥</span><label>{{ baseData.average }}</label></div>
    </div>
    </div>
    <div class="marketLimit" id="totalSales" ref='totalSales'></div>
  </div>
</template>

<script>
/**
 *       trend: { // 销售总额7天变化趋势
 *         title: '销售总额7天变化趋势',
 *         config: {
 *           dateList: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
 *         },
 *         baseData: { total: '23456.00', subTotal: '13456.00', average: '13456.00', increase: '75.00' },
 *         dataList: [
 *           {
 *             color: '#4168e7',
 *             name: 'GMV',
 *             list: [56.5, 82.1, 88.7, 70.1, 53.4, 85.1, 56.5, 82.1, 88.7, 70.1, 53.4, 85.1]
 *           },
 *           {
 *             color: '#14d8cb',
 *             name: '环比金额',
 *             list: [16.5, 42.1, 78.7, 64.1, 23.4, 89.1, 46.5, 32.1, 68.7, 80.1, 55.4, 75.1]
 *           }
 *         ]
 *       },
 */
import 'echarts/map/js/china.js'

export default {
  name: 'TotalSales',
  props: {
    documentId: {
      type: String,
      default: () => ''
    },
    config: {
      type: Object,
      default: () => {
      }
    },
    baseData: {
      type: Object,
      default: () => {}
    },
    dataList: {
      type: Array,
      default: () => []
    },
    loading: {
      type: Boolean,
      default: () => false
    }
  },
  data () {
    return {
      // levelList: null
    }
  },
  watch: {
    $route () {
      // this.testFun()
    },
    config (val) {
      this.drawLine()
    },
    baseData (val) {
      this.drawLine()
    },
    dataList (val) {
      this.drawLine()
    }
  },
  mounted () {
    this.$nextTick(_ => {
      this.drawLine()
    })
  },
  created () {},
  methods: {
    // 电商数据看板销售总额7天变化趋势
    drawLine () {
      const config = this.config
      const dataListTemp = [...this.dataList]
      // 图表自适应
      const totalSales = this.$echarts.init(document.getElementById('totalSales'))

      const colorArr = []
      const legendDataArr = [] // 顶部线条按钮
      const seriesArr = []

      dataListTemp.forEach((item, index) => {
        colorArr.push(item.color)
        const legendDataObj = {
          name: item.name,
          textStyle: { color: '#2A2E34' }// 顶部线条按钮文字颜色
        }
        legendDataArr.push(legendDataObj) // 顶部线条按钮
        const seriesObj = {
          type: 'line',
          smooth: true, // 是否润滑：曲线
          seriesLayoutBy: 'row',
          name: item.name,
          showSymbol: false, // 去掉线中的原点
          data: item.list,
          itemStyle: {
            normal: {
              areaStyle: {
                type: 'default',
                // 渐变色实现===
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1,
                    // 三种由深及浅的颜色
                    [
                      { offset: 0, color: item.color },
                      { offset: 1, color: '#ffffff' }
                    ])
              },
              lineStyle: { color: item.color }, // 线的颜色
              // 以及在折线图每个日期点顶端显示数字
              label: {
                show: false,
                position: 'top',
                textStyle: { color: 'white' }
              }
            }
          }
        }
        seriesArr.push(seriesObj)
      })

      totalSales.setOption({
        color: colorArr,
        title: { text: '' },
        tooltip: { // 提示框
          extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);',
          trigger: 'axis',
          textStyle: { color: '#333333' }, // 设置文字颜色
          borderColor: '#2D8CF0', // 设置边框颜色
          backgroundColor: '#fff' // 设置背景颜色
        },
        legend: { // 图例的类型
          icon: 'roundRect', // 图例icon图标
          // left: 'right', // 顶部线条按钮对齐方式
          data: legendDataArr // 顶部线条按钮
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          top: '17%',
          containLabel: true // grid区域是否包含坐标轴的刻度标签
        },
        xAxis: {
          type: 'category', // 坐标轴类型。
          boundaryGap: false, // 坐标轴两边留白策略
          data: config.dateList,
          axisLabel: { // 坐标轴刻度标签的相关设置
            interval: 0,
            textStyle: { color: '#999999', fontSize: 10 }
          },
          axisLine: { // 坐标轴轴线相关设置
            show: true,
            lineStyle: { color: '#999999' }
          },
          axisTick: { show: true } // 坐标轴刻度相关设置。
        },
        yAxis: {
          gridIndex: 0,
          // type: 'value',
          axisLabel: { // x轴的坐标文字
            show: true,
            textStyle: { color: '#999999' }// 文字的颜色
          },
          max: config.maxNum, // 最大值100
          axisLine: { // 坐标轴轴线相关设置
            show: false, // false 不显示Y轴线条
            lineStyle: { color: '#999999' }
          },
          axisTick: { show: false }, // 坐标轴刻度相关设置。
          splitLine: { // 坐标在grid区域的分割线
            show: true,
            lineStyle: { type: 'dashed' } // 设置分割线的样式(图表横线颜色)
          }
        },
        series: seriesArr
      })
      window.addEventListener('resize', function () {
        totalSales.resize() // myChart 是实例对象
      })
    }
  }
}
</script>
<style scoped lang="scss">
.card-total:after, .card-ratio:after {
  clear: both;
  display: table;
  content: '';
}
.echarts-line {
  margin-bottom: 27px;
  width: calc(100% - 40px);
  background: #F4F7FC;
  border-radius: 4px;
  padding: 8px 20px;
  .card-total,.card-ratio{
    width: 100%;
  }
  .card-total .card-total-left, .card-ratio .card-ratio-left {
    width: 60%;
    float: left;
    position: relative;
  }

  .card-total .card-total-right, .card-ratio .card-ratio-right {
    width: 200px;
    float: right;
    text-align: left;

    span {
      font-size: 16px;
      color: #4168E7;
    }

    label {
      &:first-child {
        font-size: 14px;
        margin-right: 20px;
        font-weight: 400;
        color: #666666;
      }

      &:last-child {
        font-size: 20px;
        font-weight: 400;
        color: #4168E7;
        width: 120px;
      }
    }
  }

  .card-total {
    .card-total-left {
      font-size: 28px;
      font-weight: bold;
      color: #4168E7;

      span {
        font-size: 20px;
      }
    }

    .card-total-right {
    }

  }

  .card-ratio {
    .card-ratio-left, .card-ratio-right {

    }

    .card-ratio-left {
      //background-color: #2D7EDF;
      p {
        height: 28px;
        line-height: 28px;
        padding: 0 20px 0 35px;
        background: #FFFFFF;
        border-radius: 14px;
        display: table;

        .arrow {
          top: 4px;
          left: 8px;
        }
      }
    }

    .card-ratio-right {

    }
  }
}
.arrow {
  border-radius: 50%;
  overflow: hidden;
  font-size: 14px;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 16px;
  height: 16px;
  padding: 1px;
  transform: scale(1);
  position: absolute;
  top: 2px;
  left: 0;
  b{
    font-weight: bold;
  }
}

.data-red, .data-green {
  padding-left: 30px;
  font-size: 14px;

  label {
    margin-right: 10px;
  }
}

.data-red {
  color: #F33F3F;

  .south-east {
    //display: block;
    color: #f65b5b;
    background-color: #ffe6e6;
  }

  .north-east {
    //display: none;
  }
}

.data-green {
  color: #12AB62;

  .south-east {
    //display: none;
  }

  .north-east {
    //display: block;
    color: #2bb473;
    background-color: #daf7e9;
  }
}

.marketLimit {
  width: 100%;
  height: 400px;
}

</style>
